<template>
  <ul class="float" v-if="img">
    <li class="item" v-for="i in 8" :key="i" :style="{'animation-duration':duration(i)}">
      <img :src="domain + img" alt="">
    </li>
  </ul>
</template>

<script>
  export default {
    data(){
      return{
        img:JSON.parse(sessionStorage.getItem("taskInfo")).setting.float_url
      }
    },
    computed:{
      duration(){
        return  function(i){
          let res= (Math.random()+Math.random()*(i+10/10)).toFixed(1)*3
          if(res<4){
            res=4
          }
          return res+'s'
        }
      }
    },
    created(){
        console.log(this.img)
    }
  }
</script>

<style lang="less" scoped>
@keyframes move_bottom{
  0%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  };
  100%{
    -webkit-transform: translateY(180vh);
    transform: translateY(180vh);
  }

};
  ul{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    width: 10rem;
    right: 0;
    margin: auto;
    li{
      top: -4rem;
      position: absolute;
      display: inline-block;
      left: .7rem; 
      -webkit-animation: move_bottom 11s linear 1s infinite forwards ;
      animation: move_bottom 11s linear  infinite forwards ;
      img{
        width: .8rem;
      }
    }
    li:nth-child(2){
      top: -6.5rem;
      left: 1.9rem; 
      -webkit-animation: move_bottom 19s linear 2s infinite forwards ;
      animation: move_bottom 19s linear  infinite forwards ;
    }
    li:nth-child(3){
      top: -2.5rem;
      left: 3.0rem; 
      -webkit-animation: move_bottom 6.5s linear  infinite forwards ;
      animation: move_bottom 6.5s linear  infinite forwards ;
    }
    li:nth-child(4){
      top: -4.5rem;
      left: 4.1rem; 
      -webkit-animation: move_bottom 9s linear 15s infinite forwards ;
      animation: move_bottom 9s linear  infinite forwards ;
    }
    li:nth-child(5){
      top: -3.0rem;
      left: 5.5rem; 
      -webkit-animation: move_bottom 8s linear  infinite forwards ;
      animation: move_bottom 8s linear  infinite forwards ;
    }
    li:nth-child(6){
      left: 7.0rem; 
      -webkit-animation: move_bottom 13s linear 13s infinite forwards ;
      animation: move_bottom 12.5s linear  infinite forwards ;
    }
    li:nth-child(7){
      top: -5.0rem;
      left: 9.0rem; 
      -webkit-animation: move_bottom 13.9s ease 20s infinite forwards ;
      animation: move_bottom 13.9s ease  infinite forwards ;
    }
    li:nth-child(8){
      top: -6.0rem;
      left: 8.1rem; 
      -webkit-animation: move_bottom 11s linear 16s infinite forwards ;
      animation: move_bottom 11s linear  infinite forwards ;
    }
  }
</style>